<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="额度卡" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="quotacard">
			<view class="quotacard-title">
				<view @click="onClickSelectIndex(3)" :class="{ 'quotacard-title-item-active': selectIndex == 3 }" class="quotacard-title-item">全部</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'quotacard-title-item-active': selectIndex == 1 }" class="quotacard-title-item">使用中</view>
				<view @click="onClickSelectIndex(0)" :class="{ 'quotacard-title-item-active': selectIndex == 0 }" class="quotacard-title-item">未使用</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'quotacard-title-item-active': selectIndex == 2 }" class="quotacard-title-item">已用完</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="totalMore" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="totalMore" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view class="quotacard-list-item" :key="item.id" v-for="item of pageData_total">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="ingMore" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="ingMore" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view class="quotacard-list-item" :key="item.id" v-for="item of pageData_ing">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="noHandleMore" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="noHandleMore" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view class="quotacard-list-item" :key="item.id" v-for="item of pageData_noHandle">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="handleMore" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="handleMore" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view class="quotacard-list-item" :key="item.id" v-for="item of pageData_handle">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				selectIndex: 3,
				h5ListHeight: 0,
				appListHeight: 0,
				// 所有的
				pageData_total: [],
				page_total: 1,
				size_total: 10,
				total_total: 0,
				totalPage_total: 0,
				// 使用中的
				pageData_ing: [],
				page_ing: 1,
				size_ing: 10,
				total_ing: 0,
				totalPage_ing: 0,
				// 未使用
				pageData_noHandle: [],
				page_noHandle: 1,
				size_noHandle: 10,
				total_noHandle: 0,
				totalPage_noHandle: 0,
				// 已用完
				pageData_handle: [],
				page_handle: 1,
				size_handle: 10,
				total_handle: 0,
				totalPage_handle: 0,
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('h_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('h_role')
					uni.removeStorageSync('h_memberId')
					uni.removeStorageSync('h_token')
					uni.removeStorageSync('h_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getTotalData()
			this._getIngData()
			this._getNoHandleData()
			this._getHandleData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.selectIndex === 0) {
				this.pageData_noHandle = []
				this.page_noHandle = 1
				this.size_noHandle = 10
				this.total_noHandle = 0
				this.totalPage_noHandle = 0
				this._getNoHandleData()
			} else if (this.selectIndex === 1) {
				this.pageData_ing = []
				this.page_ing = 1
				this.size_ing = 10
				this.total_ing = 0
				this.totalPage_ing = 0
				this._getIngData()
			} else if (this.selectIndex === 2) {
				this.pageData_handle = []
				this.page_handle = 1
				this.size_handle = 10
				this.total_handle = 0
				this.totalPage_handle = 0
				this._getHandleData()
			} else if (this.selectIndex === 3) {
				this.pageData_total = []
				this.page_total = 1
				this.size_total = 10
				this.total_total = 0
				this.totalPage_total = 0
				this._getTotalData()
			}
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".quotacard-title");
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
					}).exec()
				})
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			onClickSelectIndex(index) {
				this.selectIndex = index
			},
			totalMore() {
				const page1 = this.page_total + 1;
				const totalPage = this.totalPage_total
				if (page1 <= totalPage) {
					this.page_total = page1
					this._getTotalData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			ingMore() {
				const page1 = this.page_ing + 1;
				const totalPage = this.totalPage_ing
				if (page1 <= totalPage) {
					this.page_ing = page1
					this._getIngData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			noHandleMore() {
				const page1 = this.page_noHandle + 1;
				const totalPage = this.totalPage_noHandle
				if (page1 <= totalPage) {
					this.page_noHandle = page1
					this._getNoHandleData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			handleMore() {
				const page1 = this.page_handle + 1;
				const totalPage = this.totalPage_handle
				if (page1 <= totalPage) {
					this.page_handle = page1
					this._getHandleData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			_getTotalData() {
				const page = this.page_total
				const size = this.size_total
				uni.request({
					url: `${config.api_base_url}merchant/purchase/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true && data && data.rows) {
							this.total_total = data.total
							this.totalPage_total = this.pageTotal(this.total_total, this.size_total)
							this.pageData_total = this.pageData_total.concat(data.rows)
						} else {
							this.total_total = 0
							this.totalPage_total = 0
							this.pageData_total = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			_getIngData() {
				const page = this.page_ing
				const size = this.size_ing
				uni.request({
					url: `${config.api_base_url}merchant/purchase/1/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true && data && data.rows) {
							this.total_ing = data.total
							this.totalPage_ing = this.pageTotal(this.total_ing, this.size_ing)
							this.pageData_ing = this.pageData_ing.concat(data.rows)
						} else {
							this.total_ing = 0
							this.totalPage_ing = 0
							this.pageData_ing = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			_getNoHandleData() {
				const page = this.page_noHandle
				const size = this.size_noHandle
				uni.request({
					url: `${config.api_base_url}merchant/purchase/0/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true && data && data.rows) {
							this.total_noHandle = data.total
							this.totalPage_noHandle = this.pageTotal(this.total_noHandle, this.size_noHandle)
							this.pageData_noHandle = this.pageData_noHandle.concat(data.rows)
						} else {
							this.total_noHandle = 0
							this.totalPage_noHandle = 0
							this.pageData_noHandle = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			_getHandleData() {
				const page = this.page_handle
				const size = this.size_handle
				uni.request({
					url: `${config.api_base_url}merchant/purchase/2/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true && data && data.rows) {
							this.total_handle = data.total
							this.totalPage_handle = this.pageTotal(this.total_handle, this.size_handle)
							this.pageData_handle = this.pageData_handle.concat(data.rows)
						} else {
							this.total_handle = 0
							this.totalPage_handle = 0
							this.pageData_handle = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F5F8;
	}
</style>
<style scoped>
	.quotacard {
		width: 100%;
	}

	.quotacard-title {
		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-top: 1px solid #F6F5F8;
	}

	.quotacard-title-item {
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	.quotacard-title-item-active {
		color: #F02230;
		position: relative;
	}

	.quotacard-title-item-active::after {
		content: ' ';
		position: absolute;
		left: 50%;
		bottom: -8rpx;
		margin-left: -31rpx;
		width: 62rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #F02230;
	}

	.quotacard-list {
		width: 100%;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
	}

	.quotacard-list-item {
		width: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-right: 28rpx;
		padding-bottom: 22rpx;
		padding-left: 36rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 12rpx;
	}

	.quotacard-list-item:last-child {
		margin-bottom: 0;
	}

	.quotacard-list-item-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.quotacard-list-item-name-left {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		font-weight: 600;
	}

	.quotacard-list-item-name-right {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
	}

	.useing {
		color: #0091FF;
	}

	.nouse {
		color: #F7B500;
	}

	.end {
		color: #F02230;
	}

	.quotacard-list-item-price {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
	}

	.quotacard-list-item-price-left {
		font-size: 36rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 50rpx;
		margin-right: 70rpx;
	}

	.quotacard-list-item-price-right {
		font-size: 36rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 50rpx;
	}

	.quotacard-list-item-line {
		width: 100%;
		margin-top: 12rpx;
		height: 2rpx;
		background-color: #eee;
	}

	.quotacard-list-item-kahao {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #6D7278;
		line-height: 40rpx;
		margin-bottom: 6rpx;
	}

	.quotacard-list-item-kahao:last-child {
		margin-bottom: 0;
	}
</style>
